import {useState} from 'react'
import './index.scss'


const Header = (props) => {
    const [value, setValue] = useState('')
    const handleKeyUp = (event) => {
        const {key} = event
        if (key !== 'Enter') return
        if (value === '') {
            alert('输入不能为空')
            return
        }
        const id = new Date().getTime()
        props.addTodo({id: id, name: value, done: false})
        setValue('')
    }


    return (
        <div className='todo-header'>
            <input value={value}
                   onChange={(e) => setValue(e.target.value)}
                   type="text"
                   onKeyUp={handleKeyUp}
                   placeholder='请输入不得任务名称，按回车确认'
            />
        </div>
    )
}
export default Header